<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>列表+表单+新元素</title>
	</head>
	<body>
		<h1>列表元素：集合-一组相同数据</h1>
		<!-- 第一组使用方式：无序列表  使用率高：网站优化，有利于SEO优化-->
		<ul>
			<li>哪吒</li>
			<li>白雪公主</li>
			<li>熊出没</li>
		</ul>
		<!-- 第二组使用方式：有序列表 -->
		<ol>
			<li>大头儿子</li>
			<li>邋遢大王</li>
			<li>喜羊羊</li>
		</ol>
		<!-- 第三种使用方式：定义列表 -->
		<dl>
			<dt><img src="img/1.png" ></dt>
			<dd>这是哪吒</dd>
		</dl>
		<h1>表单元素</h1>
		<!-- 采集用户信息：账户登录，颜色，功能型操作 -->
		<form>
		账号：<input type="text">
		密码：<input type="password"><!-- 加密 -->
		<button>按钮</button>
		<input type="submit">
		<input type="reset">
		男 <input type="radio" name="sex"><!-- 单选 -->
		女 <input type="radio" name="sex">
		肉 <input type="checkbox"><!-- 多选 -->
		菜 <input type="checkbox">
		汤 <input type="checkbox">
		</form>
		<h1>新元素</h1>
		lorem<mark>lorems</mark>
		<!-- 记号笔元素 -->
		<meter value="60" max="100" min="1"></meter>
		<!-- value 0-1之间的值--><!-- 度量元素 -->
		<details>
			<summary>默认显示效果</summary>
			<div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate eaque enim tempore, doloribus dolorum quibusdam harum. Omnis hic voluptas tenetur illum ipsa dolores voluptatum necessitatibus suscipit. Exercitationem rerum esse iure! Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ut dolor voluptas quisquam sed iste exercitationem harum assumenda enim doloribus qui itaque quos incidunt maxime sequi, modi asperiores dolores temporibus facere. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sequi, animi. Provident culpa omnis ad laboriosam repellat aspernatur, dolores nam nulla suscipit eos laborum, ea, eum minus? Nemo minus autem ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique corporis tempora quisquam architecto mollitia nihil eligendi possimus nesciunt incidunt praesentium id, tenetur vero! Culpa nam itaque provident corporis soluta? Mollitia.</div>
		</details>
		<!-- 细节元素 -->
	</body>
</html>